<template>
  <div>
    <h1>事件绑定</h1>
    <div>{{ count }}</div>
    <div>
      <!-- 当回调函数需要传参，但是调用时没有传参，会返回事件对象参数 -->
      <button v-on:click="handlerClick">按钮一</button>
      <button @click="handlerClick2">按钮二</button>
      <!-- 同时传入参数和事件对象参数($event,内置全局变量，代表事件对象参数) -->
      <a @click="go(234, $event)" href="http://www.baidu.com">百度</a>
    </div>
    <div>
      <!-- 其他用法 -->
      <button @click="count = 100">执行修改</button>
      <button @click="handlerClick(1000)">传参</button>
    </div>
    <div @mousemove="handlerMove" class="box">鼠标移动事件</div>
    <p>
      <input @focus="handlerFocus" type="text" />
    </p>
  </div>
</template>

<script>
/**
 * * 语法
 * v-on:事件名="要执行的==少量代码=="
 * v-on:事件名="methods中的函数"
 * v-on:事件名="methods中的函数(实参)"
 * 简写(推荐): @事件名="methods中的函数"
 */
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handlerMove(e) {
      console.log(e.offsetX);
    },
    go(n, e) {
      console.log(n);
      e.preventDefault();
    },
    handlerClick(n) {
      console.log("点击触发", n);
    },
    handlerClick2(e) {
      console.log(e);
    },
    handlerFocus(e) {
      console.log(e.target);
    },
  },
};
</script>

<style>
.box {
  background-color: pink;
  width: 200px;
  height: 200px;
}
</style>